<template>
  <!-- 头部整体盒子 -->
  <div class="container-fuild" :key="key">
    <div v-for="(it, idx) in dataList" :key="it.id" class="normal-item" :class="{'item-one' : !idx}">
      <template v-if="key==='creditorList'">
        <div class="line-one">
          <span>主债务人姓名/机构名称:{{it.name}}</span>
          <span>债权金额:{{it.status}}</span>
          <span>发布时间:{{it.createTime}}</span>
          <span @click="viewDetail(it.id)">查看详情</span>
        </div>
        <div class="line-two"><span>债务人所在地址：{{it.address}}</span></div>
      </template>

      <template v-if="key==='changeList'">
        <div class="line-one">
          <span>主债务人姓名/机构名称:{{it.name}}</span>
          <span>债权金额:{{it.status}}</span>
          <span>转让金额:{{it.money}}</span>
          <span @click="viewDetail(it.id)">查看详情</span>
        </div>
        <div class="line-two">
          <span>债权ID:{{it.id}}</span>
          <span>发布时间:{{it.createTime}}</span>
          <span>债务人所在地址：{{it.address}}</span>
        </div>
      </template>

      <template v-if="key==='trustList'">
        <div class="line-one">
          <span>求助信息的事由:{{it.reason}}</span>
          <span>求助信息的诉讼内容:{{it.content}}</span>
          <span>求助信息的结束标准:{{it.endSign}}</span>
          <span @click="viewDetail(it.id)">查看详情</span>
        </div>
        <div class="line-two">
          <span>求助信息的执行地区:{{it.address}}</span>
          <span>求助信息的代理价格:{{it.money}}</span>
          <span>信息有效时间:{{it.validTime}}</span>
        </div>
        <div class="line-three">
          <span>案源ID:{{it.id}}</span>
          <span>发布时间:{{it.createTime}}</span>
        </div>
      </template>

      <template v-if="key==='messageList'">
        <div class="line-one">
          <span>{{it.question}}</span>
          <span @click="viewDetail(it.id)">查看详情</span>
        </div>
        <div class="line-two">
          <span>等{{it.people.length}}人参与讨论 | {{it.updateTime}} | {{it.belong}}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "List",
  props: {
    dataList: {
      type: Array,
      // default: ()=> []
    },
    key: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // listKey: ''
    }
  },
  // mounted() {
  //   this.listKey = this.key;
  // },
  methods: {

  }
};
</script>
<style scoped>
.normal-item {
  border: 2px solid #CADEF5;
  border-radius: 4px;
  padding: 20px 10px;
  margin-top: 30px;
}
.item-one {
  color: #fff;
  background: #3B8FEE;
}
.line-one {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #CADEF5;
  padding-bottom: 20px;
}
.line-two {
  padding-top: 20px;
}
</style>
